<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/head.html' as d />
<#import '${ctx}/sys/include/body.html' as c />
<#import '${ctx}/sys/include/table/select.html' as select />
<!DOCTYPE html>
<html>
<head>
    <@d.head title="图表定义" />
    <link rel="stylesheet" href="${ctx}/resource/css/chart/icon.css">
    <link rel="stylesheet" href="${ctx}/resource/css/chart/chart_def.css">
</head>
<@c.body>
<div class="layui-col-md2">
      <div class="layui-card">
        <div class="layui-card-header">图形原则</div>
        <div class="layui-card-body">
          <div class="layui-collapse" lay-filter="component-panel" lay-accordion>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">比较类<i class="layui-icon layui-colla-icon"></i></h2>
              <div class="layui-colla-content tags">
              	<a href="${ctx}/biz/chart/def/p/bar" target="chart_detail"><span class="iconfont icon-bar"></span> 柱状图</a>
              	<a href="#"><span class="iconfont icon-bubble"></span> 气泡图</a>
              	<a href="#"><span class="iconfont icon-radar"></span> 雷达图</a>
              	<a href="${ctx}/biz/chart/def/p/rose" target="chart_detail"><span class="iconfont icon-rose"></span> 南丁格尔玫瑰图</a>
              	<a href="${ctx}/biz/chart/def/p/area" target="chart_detail"><span class="iconfont icon-stacked-area"></span> 面积图</a>
              	<a href="#"><span class="iconfont icon-treemap"></span> 矩形树图</a>
              	<a href="${ctx}/biz/chart/def/p/words" target="chart_detail"><span class="iconfont icon-word-cloud"></span> 词云</a>
              </div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">分布类<i class="layui-icon layui-colla-icon"></i></h2>
              <div class="layui-colla-content tags">
              	<a href="#"><span class="iconfont icon-bubble"></span> 气泡图</a>
              	<a href="#"><span class="iconfont icon-color-map"></span> 色块图</a>
              	<a href="#"><span class="iconfont icon-distribution-curve"></span> 分布曲线图</a>
              	<a href="#"><span class="iconfont icon-heatmap"></span> 热力图</a>
              	<a href="#"><span class="iconfont icon-scatter"></span> 散点图</a>
              </div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">流程类<i class="layui-icon layui-colla-icon"></i></h2>
              <div class="layui-colla-content tags">
              	<a href="#"><span class="iconfont icon-sankey"></span> 桑基图</a>
              </div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">占比类<i class="layui-icon layui-colla-icon"></i></h2>
              <div class="layui-colla-content tags">
              	<a href="${ctx}/biz/chart/def/p/pie2" target="chart_detail"><span class="iconfont icon-donut"></span> 环图</a>
              	<a href="#"><span class="iconfont icon-mosaic"></span> 马赛克图</a>
              	<a href="${ctx}/biz/chart/def/p/pie" target="chart_detail"><span class="iconfont icon-pie"></span> 饼图</a>
              	<a href="#"><span class="iconfont icon-stacked-area"></span> 堆叠面积图</a>
              	<a href="#"><span class="iconfont icon-stacked-bar"></span> 堆叠柱状图</a>
              	<a href="#"><span class="iconfont icon-treemap"></span> 矩形树图</a>
              </div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">关联类<i class="layui-icon layui-colla-icon"></i></h2>
              <div class="layui-colla-content tags">
              	<a href="#"><span class="iconfont icon-arc"></span> 弧长链接图</a>
              	<a href="#"><span class="iconfont icon-sankey"></span> 桑基图</a>
              	<a href="#"><span class="iconfont icon-venn"></span> 韦恩图</a>
              </div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">时间类<i class="layui-icon layui-colla-icon"></i></h2>
              <div class="layui-colla-content tags">
              	<a href="#"><span class="iconfont icon-area"></span> 面积图</a>
              	<a href="${ctx}/biz/chart/def/p/line" target="chart_detail"><span class="iconfont icon-line"></span> 折线图</a>
              	<a href="#"><span class="iconfont icon-kagi"></span> 卡吉图</a>
              	<a href="#"><span class="iconfont icon-spiral"></span> 螺旋图</a>
              	<a href="#"><span class="iconfont icon-stacked-area"></span> 堆叠面积图</a>
              </div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">趋势类<i class="layui-icon layui-colla-icon"></i></h2>
              <div class="layui-colla-content tags">
              	<a href="#"><span class="iconfont icon-area"></span> 面积图</a>
              	<a href="#"><span class="iconfont icon-line"></span> 折线图</a>
              	<a href="#"><span class="iconfont icon-kagi"></span> 卡吉图</a>
              	<a href="#"><span class="iconfont icon-regression-curve"></span> 回归曲线图</a>
              	<a href="#"><span class="iconfont icon-stacked-area"></span> 堆叠面积图</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md10">
		<iframe id="chart_detail" name="chart_detail" class="chart-iframe" src="" onload="setIframeHeight(this)"></iframe>
    </div>
</@c.body>
<script>
	layui.use('jquery',function(){
		var $ = layui.$;

		$().ready(function(){
			$(window).on('resize',function(){
				setIframeHeight(document.getElementById('chart_detail'));
			})

			$(".tags>a").bind('click',function(){
				$(".tags>a").removeClass("this");
				$(this).addClass("this");
			})
		})

		window.resize = function(){
			setIframeHeight(document.getElementById('chart_detail'));
		}

	});
	function setIframeHeight(iframe) {
		if (iframe) {
			var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
			if (iframeWin.document.body) {
				var iframeHeight = (iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight);
				var windowHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				if(windowHeight>iframeHeight) {
					iframeHeight = windowHeight-75;
				}
				iframe.style.height = iframeHeight+'px';
			}
		}
	}
</script>